<template>
  <div class="container">
    <v-toolBar
      :fullPath="postData.opera"
      :tableColumns="tableColumns"
      @changeLie="getChangeLie"
      @getSearchIPArr="getToolBarSearchIPArr"
      @getSearchIP="getToolBarSearchIP"
    >
    </v-toolBar>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableDataFn"
      border
      style="width: 100%"
      stripe
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <template v-for="item in tableColumns">
              <el-form-item :key="item.prop" :label="item.label">
                <span style="color: #e9967a">{{ props.row[item.prop] }}</span>
              </el-form-item>
            </template>
          </el-form>
        </template>
      </el-table-column>

      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sortable"
          :width="item.width"
          align="center"
          v-if="item.isShow"
          :key="item.prop"
        >
        </el-table-column>
      </template>
    </el-table>
    <v-pagination
      :dataTotal="dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination>
  </div>
</template>

<script>
import { getItemMonitorSQLinfo } from "@/api/index.js";
import vPagination from "../../../../common/Pagination.vue";
import vToolBar from "../../toolbar/Toolbar.vue";
import tableColumns from "./SQLInfoTableColumns.js";
import bus from "common/bus.js";
import { number } from 'echarts';

export default {
  components: {
    vPagination,
    vToolBar,
  },
  data() {
    return {
      postData: {
        opera: "dbConnect",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: { DBTYPE: "Oracle" },
      },
      tableData: [],
      dataTotal: 0,
      tableColumns: tableColumns,
      SearchIPArr: [],
      searchJson: {},
      SearchIP: "",
      timerName: "MonitorInfoDataBaseINFO",
      timerEventName: "timerMonitorInfoDataBaseINFO",
      // timerInterval: 1000 * 60,
      loading: true,
      selectedMonID: "",
    };
  },
  created() {
    this.selectedMonID = this.$store.getters["ItemMonitorALL/getItem"];

    this.getTableData();

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getTableData();
      }
    });
  },
  mounted() {
    bus.$on("ItemMonitorALL", (msg) => {
      this.resetData();
      this.selectedMonID = msg;

      this.getTableData();
    });
  },
  computed: {
    tableDataFn() {
      return this.tableData.filter((item) => {
        return item;
      });
    },
    timerInterval() {
      return Number(this.$store.state.pageRefresh) * 1000;
    },
  },
  methods: {
    getTableData() {
      getItemMonitorSQLinfo({
        // ip: this.selectedMonID.IP,
        cid: this.selectedMonID.MONID,
        pageNum: this.postData.curPage,
        pageSize: this.postData.pageSize,
      }).then((_) => {
       
        if (!Object.values(_)[0]) {
          this.tableData = [];
          this.loading = false;
          this.dataTotal = 0;
          return;
        }
        
        this.tableData = Object.values(_)[0].map((_) => {
          return {
            PORT: _.port,
            MACHINE: _.machine,
            OSUSER: _.osuser,
            USERNAME: _.username,
            EVENT: _.event,
            PROCTYPE: _.proctype,
            PROGRAM: _.program,
            MODULE: _.module,
            STATUS: _.status,
            SID: _.dbsid,
            SESSION_SERIAL: _.sessionSerial,
            ACTION: _.action,
            FIRST_REFRESH_TIME: _.firstRefreshTime,
            LAST_REFRESH_TIME: _.lastRefreshTime,
            ELAPSED_TIME: _.elapsedTime,
            SQL_ID: _.sqlId,
            SQL_TEXT: _.sqlText,
            SQL_EXEC_START: _.sqlExecStart,
            CPU_TIME: _.cpuTime,
            USER_IO_WAIT_TIME: _.userIoWaitTime,
            APPLICATION_WAIT_TIME: _.applicationWaitTime,
            CLUSTER_WAIT_TIME: _.clusterWaitTime,
            DISK_READS: _.diskReads,
            READ_GBYTES: _.readGbytes,
            WRITE_GBYTES: _.writeGbytes,
            record_time: _.recordTime,
          };
        });
        this.dataTotal = Number(Object.keys(_)[0]);
        
      }).finally(()=>{
        this.loading = false;
      });
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;
      this.getTableData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getTableData();
    },
    getToolBarSearchIPArr(arr) {
      // 获取搜索IP关键字
      this.SearchIPArr = arr;

      this.postData.curPage = 1;
      if (this.SearchIPArr.length > 0) {
        this.postData.filters = {
          ip: this.SearchIPArr,
        };
      } else {
        this.postData.filters = {};
      }

      this.getTableData();
    },
    getToolBarSearchIP(str) {
      // 获取搜索IP关键字
      this.SearchIP = str;
      this.postData.curPage = 1;
      this.postData.filters = {
        ip: this.SearchIP,
      };
      this.getTableData();
    },
    getChangeLie(val) {
      // 遍历表格列
      this.tableColumns.map((item, index) => {
        // 列的显示隐藏状态改变
        item.isShow = val.includes(item.label);
      });
    },
    resetData() {
      this.dataTotal = 0;
      this.tableData = [];
    },
  },
  watch: {},
  beforeDestroy() {
    // 页面关闭前，移除定时器任务
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
};
</script> 

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #1f3d68;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>